window.onload=function(){
    //配置
    var config = {
        vx: 4,	//小球x轴速度,正为右，负为左
        vy: 4,	//小球y轴速度
        height: 2,	//小球高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200,		//点个数
        // color: "121, 162, 185", 	//点颜色
        color: "200,193,193", 	//点颜色
        // stroke: "130,255,255", 		//线条颜色
        // stroke: "240,250,228", 		//线条颜色
        stroke: "0,0,0", 		//线条颜色
        dist: 6000, 	//点吸附距离
        e_dist: 20000, 	//鼠标吸附加速距离
        max_conn: 10 	//点到点最大连接数
    }
    //调用
    CanvasParticle(config);
}


// 价格模拟服务器的数据

let data = [
    {"count": 4000, "price": 1200, "unitPrice": "0.3000"},
    {"count": 8000, "price": 2000,"unitPrice": "0.2500" },
    {"count": 40000, "price": 8000, "unitPrice": "0.2000" }
   ]

   /* 
        获取元素
   */
  let canwastext3= document.querySelector('.canwas-text3')
  let priceAll= document.querySelector('.priceAll')
  let unitPrice= document.querySelector('.unitPrice')


/* 遍历数组，将count数据 渲染到canwas-text3里面*/
let dataNew=''
    data.forEach(function(v,i){
        dataNew +=`
                    <li class="${i === 0 ? 'active' : ''} 
                    " data-price="${v.price}"
                    data-unit-price="${v.unitPrice}"">
                    <span>${v.count}次</span>
                    </li> 
                `
    })
    //将数据渲染到canwas-text3里面
    canwastext3.innerHTML += dataNew

/* 
*点击 li的时候将price的数据传到priceAll里面
* unitPrice的数据传入unitPrice
*/

canwastext3.addEventListener('click',function(e){
    //筛选事件源，我们要选出其他三个li事件源
    let bool=e.target.nodeName==='LI'  &&  e.target.classList != 'active2'
    if(bool){
        //先清除掉所有li的类名active
        for (let i = 1; i < canwastext3.children.length; i++) {
            canwastext3.children[i].classList = ''
        };
        //给当前事件源添加激活样式(active)
        e.target.classList = 'active'
    
        //设置价格
        priceAll.textContent = e.target.dataset.price;
    console.log(e.target.dataset.price);
        //设置单价
        unitPrice.textContent = e.target.dataset.unitPrice;  
        }

})


/**
 * 5.需求: api详情选项卡
 * 当点击选项卡的时候  索引相同的就一起显示  上一个就隐藏
 */

let menuLi=document.querySelectorAll('.api-tab-menu li')
let menuDiv=document.querySelectorAll('.api-tab-left .none')
console.log(menuDiv);


    /* 
      需求: 鼠标移入菜单(li) //所有
            1> 给当前菜单(li)添加激活样式 == 一个
            2> 显示当前菜单对应的内容
     */ 
        
            //遍历菜单
         menuLi.forEach(function (dom, index) {
        
              //注册移入事件
              dom.addEventListener('click', function () {
        
                //先-清除所有菜单的激活样式
                menuLi.forEach(function (v) {
                  v.classList.remove('active')
                })
        
                //给当前菜单(li)添加激活样式
                this.classList.add ('active')

                //先-清除所有内容p的类名
                menuDiv.forEach(function (v) {
                  v.classList.remove('on')
                })
        
                //再- 显示当前菜单对应的内容
                menuDiv[index].classList.add('on')
              })
            })




